import React, { useEffect, useState} from 'react';

import '../../../styles/Booking Management/Registration.scss'
import Top from '../../../component/Booking/Top'
import { table_list, del_list,search_list,put_list } from '../../../utils/Booking Management/api'

import { notification,Radio, DatePicker, Space, Input, Button, Dropdown, message, Table, ConfigProvider } from 'antd';
import { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import type { MenuProps } from 'antd';
import { Form, Modal, Select } from 'antd';
import { EditOutlined, DownOutlined, UserOutlined, DeleteOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
interface Props {

}
const {Search} = Input;
// 表格
interface DataType {
    key: string;
    name: string;
    jnumber: string;
    snumber: string;
    phone: string;
    active: string;
    ghks: string;
    moeny: string;
    over: string;
    jday: string;
}
interface Item{
    id:string,name:string
}
function Registration(props: Props) {
    // 父子传值
    let gengGai = {
        title:'预约挂号'
    }

    const columns: ColumnsType<DataType> = [
        {
            title: '患者姓名',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '就诊卡号',
            dataIndex: 'jnumber',
            key: 'jnumber',
        },
        {
            title: '身份证号',
            dataIndex: 'snumber',
            key: 'snumber',
        },
        {
            title: '手机号码',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '挂号科室',
            dataIndex: 'ghks',
            key: 'ghks',
        },
        {
            title: '挂号类型',
            dataIndex: 'active',
            key: 'active',
        },
        {
            title: '挂号费',
            dataIndex: 'money',
            key: 'money',
        },
        {
            title: '挂号状态',
            dataIndex: 'over',
            key: 'over',
        },
        {
            title: '就诊日期',
            dataIndex: 'jday',
            key: 'jday',
        },
        {
            title: '就诊时间',
            dataIndex: 'jday',
            key: 'jday',
        },
        {
            title: '预约时间',
            dataIndex: 'jday',
            key: 'jday',
        },
        {
            title: '操作',
            key: 'tags',
            render: (_, record) => (
                <Space size="middle">
                    <a><EditOutlined onClick={() => { toBj(record,) }} /></a>
                    <a><DeleteOutlined onClick={() => { toDel(record,) }} /></a>
                </Space>
            ),
        },
    ];

    // 下拉菜单
    const handleMenuClick: MenuProps['onClick'] = (e) => {
        message.info('Click on menu item.');
        console.log('click', e);
    };
    const items: MenuProps['items'] = [
        {
            label: '内科',
            key: '1',
            icon: <UserOutlined />,
        },
        {
            label: '外科',
            key: '2',
            icon: <UserOutlined />,
        },
        {
            label: '骨科',
            key: '3',
            icon: <UserOutlined />,
        },
    ];
    const menuProps = {
        items,
        onClick: handleMenuClick,
    };

    // 时间表格
    const { RangePicker } = DatePicker;

    // 跳转路由
    let navigate = useNavigate()
    // 获取列表内容
    let [data,setdata] = useState([])
    // 获取数据
    useEffect(() => {
        //解构获取的数据
        table_list().then(({ data }) => {
            console.log(data);
            setdata(data)
            // setdata(data=[...data])
        })
    }, [])
    // 按名字搜索
    const onSearch = (value:string)=>{
        let seachkey = value     
            console.log(seachkey);            
            search_list(seachkey).then((res)=>{
                console.log("查询的", res.data);
                setdata(res.data);
                notification.success({ message: '查询成功！' });
            })
    }
    // 删除
    let toDel =(record:any)=>{
        let id = record.id
        del_list(id).then((res)=>{
            table_list().then((res)=>{
                setdata(res.data)
            })
            notification.success({message:'删除成功！'})
        })
    }
    // 批量删除
    let toAllDel = () => {
        console.log(rowSelection);
        // if (rowSelection) {
        //     rowSelection.map((item:any) => {
        //         del_list(item).then((res) => {
        //             table_list().then((res) => {
        //                 setdata(res.data)
        //             })
        //         })
        //     })
        // }
    }
    // 复选框
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record: DataType) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };

    // 分页器
    let [pagination,setPagination] = useState<TablePaginationConfig>({current:1,pageSize:10,total:0})
    // 分页
    const page = (page:TablePaginationConfig)=>{}
    // 编辑修改
    const [isModalOpenedit,setIsModalOpenedit] = useState(false)
    const showModaledit = () => {
        setIsModalOpenedit(true);
    };
    const handleOkedit = () => {
        setIsModalOpenedit(false);
    };
    const handleCanceledit = () => {
        setIsModalOpenedit(false);
    };
    // 获取本行的key内容
    let [newid, setnewid] = useState('')
    // 点击编辑
    let [form]= Form.useForm();
    const toBj = (record:any)=>{
        showModaledit();
        form.setFieldsValue(record)
        setnewid(record.id)
    }
    // 编辑表单提交
    const onFinishedit = (values: any) => {
        console.log(values);
        put_list(values).then((res) => {
            console.log(res);
            table_list().then(({ data }) => {
                // console.log(data);
                setdata(data)
            })
            notification.success({ message: '修改成功！' });
        })
        setIsModalOpenedit(false);
    }
    return (
        <div className='reg-all'>
            <Top {...gengGai} />
            <div className='reg-minall'>
                <div className='minall-top'>
                    <div className='minall-top-left'>
                        <Radio>全部</Radio>
                        <Radio>待就诊</Radio>
                        <Radio>已就诊</Radio>
                        <Radio>已取消</Radio>
                    </div>
                    <Space direction="vertical" size={8}>
                        <RangePicker placeholder={['开始日期','结束日期']} size='small' />
                    </Space>
                    <Space wrap>
                        <Dropdown menu={menuProps}>
                            <Button>
                                <Space>
                                    请选择科室
                                    <DownOutlined />
                                </Space>
                            </Button>
                        </Dropdown>
                    </Space>   
                    <Button className='delbutton' type='primary' onClick={() => { toAllDel() }}>删除</Button>
                    <div className="seach">
                        <Search placeholder="请输入医生姓名" onSearch={onSearch} enterButton style={{ width: 300, marginRight: 20 }} />
                        {/* <Button type="primary" onClick={open}>搜索</Button> */}
                    </div>
                </div>
                <ConfigProvider>
                    <Table columns={columns} dataSource={data} pagination={{ pageSize: 10 }} rowSelection={rowSelection} />
                </ConfigProvider>
                <div className="tablecountent">
                    <Modal title="编辑信息" footer={[]} open={isModalOpenedit} onOk={handleOkedit} onCancel={handleCanceledit}>
                        <Form
                            name="basic"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 18 }}
                            onFinish={onFinishedit}
                            form={form}
                        >   <Form.Item hidden label="id" name="id">
                                <Input placeholder='请输入id' />
                            </Form.Item>
                            <Form.Item label="姓名" name="name">
                                <Input placeholder='请输入内容' />
                            </Form.Item>
                            <Form.Item label="就诊号" name="jnumber">
                                <Input placeholder='请输入内容' />
                            </Form.Item>
                            <Form.Item label="身份证号" name="snumber">
                                <Input placeholder='请输入内容' />
                            </Form.Item>
                            <Form.Item label="手机号" name="phone">
                                <Input placeholder='请输入内容' />
                            </Form.Item>
                            <Form.Item label="请选择科室" name="ghks">
                                <Select>
                                    <Select.Option value="骨科">骨科</Select.Option>
                                    <Select.Option value="内科">内科</Select.Option>
                                    <Select.Option value="皮肤科">皮肤科</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item label="挂号状态" name="active">
                                <Input placeholder='请输入内容' />
                            </Form.Item>
                            <Form.Item label="金额" name="money">
                                <Input placeholder='请输入内容' />
                            </Form.Item>
                            <Form.Item label="就诊情况" name="over">
                                <Select>
                                    <Select.Option value="已就诊">已就诊</Select.Option>
                                    <Select.Option value="未就诊">未就诊</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item label="就诊时间" name="jday">
                                <Input placeholder='请输入内容' />
                            </Form.Item>
                            {/* <Form.Item label="医生简介" name="doctorprofile">
                                <TextArea rows={4} placeholder="请输入内容" />
                            </Form.Item> */}
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Button type="primary" htmlType="submit">
                                    确定
                                </Button>
                                <Button style={{ marginLeft: 20 }} onClick={() => { handleCanceledit() }}>
                                    取消
                                </Button>
                            </Form.Item>
                        </Form>
                    </Modal>
                    {/* <UserTable ref={childref} header={columns} formlist={formlist} /> */}
                    {/* <UserTable page={page} elected={elected} header={columns} formlist={data} /> */}
                </div>
            </div>
        </div>
    );
}
export default Registration;